<template>
  <div class="page-warp-view f">
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-workBench-header"></div>
    <div class="vm-workBench-container" ref="warpper">
      <div class="content">
        <div class="vm-workBench-warp">
          <div class="vm-workBench-content">
            <div class="all" @click="$router.push('/examine')">
              <p>{{ AllTotal }}</p>
              <h6>全部</h6>
            </div>
            <div class="pending" @click="$router.push('/examine')">
              <p style="color: #fe030a;">{{ pendingTotal }}</p>
              <h6>待处理</h6>
            </div>
            <div class="processed" @click="$router.push({path: '/examine', query: { examineToggle:1 }})">
              <p style="color: #22a9fb;">{{ processedTotal }}</p>
              <h6>已处理</h6>
            </div>
          </div>
        </div>
        <div class="vm-cokpitContent-warp">
          <div class="vm-cokpitNav-warp">
          	<h5>供应商管理</h5>
          	<ul>
          		<li>
          			<i class="vm-cockpit-icon item1"></i>
          			<p>供应商邀请</p>
          		</li>
          		<li>
          			<i class="vm-cockpit-icon item2"></i>
          			<p>邀请平台供应商</p>
          		</li>
          		<router-link to="/work_bench/vendor/vendor_checkList" tag="li" class="br0">
          			<i class="vm-cockpit-icon item3"></i>
          			<p>供应商审核</p>
          		</router-link>
          		<li>
          			<i class="vm-cockpit-icon item4"></i>
          			<p>供应商分类管理</p>
          		</li>
          		<li>
          			<i class="vm-cockpit-icon item5"></i>
          			<p>供应商不良业绩</p>
          		</li>
          		<li class="br0">
          			<i class="vm-cockpit-icon item6"></i>
          			<p>供应商绩效</p>
          		</li>
          		<li class="bb0">
          			<i class="vm-cockpit-icon item7"></i>
          			<p>供应商考察</p>
          		</li>
          		<li class="bb0">
          			<i class="vm-cockpit-icon item8"></i>
          			<p>供应商短信</p>
          		</li>
          		<li class="br0 bb0">
          			<i class="vm-cockpit-icon item9"></i>
          			<p>供应商清退</p>
          		</li>
          	</ul>
          </div>
          <div class="vm-materielofProject">
          	<div class="materielofProject-t">
          		<div class="t-item btlr5">物料管理</div>
          		<div class="t-item br0 btrr5">项目管理</div>
          	</div>
          	<div class="materielofProject-b">
          		<ul>
          			<router-link tag="li" to="/work_bench/material/material_list">
          				<div class="icon-item">
          					<i class="vm-cockpit-icon item10"></i>
          				</div>
          				<p>物料列表</p>
          			</router-link>
          			<li>
          				<div class="icon-item">
          					<i class="vm-cockpit-icon item11"></i>
          				</div>
          				<p>物料分类编码设置</p>
          			</li>
          			<li>
          				<div class="icon-item">
  	        				<i class="vm-cockpit-icon item12"></i>
  	        			</div>
  	        			<p>计量单位管理</p>
          			</li>
          			<li>
          				<div class="icon-item">
  	        				<i class="vm-cockpit-icon item13"></i>
  	        			</div>
  	        			<p>价格库</p>
          			</li>

          		</ul>
          	</div>
          </div>
          <!-- 采购需求, 采购计划, 采购方案 start -->
          <div class="vm-cokpitList-warp">
          	<div class="cokpitList-top">
          		<ul>
          			<li class="bb0 btlr5">
          				采购需求
          				<span>6</span>
          			</li>
          			<li class="bb0">
          				采购计划
          				<span>18</span>
          			</li>
          			<li class="bb0 br0 btrr5">
          				采购方案
          				<span>18</span>
          			</li>
          		</ul>
          	</div>
          	<div class="cokpitList-nav">
          		<div class="screen"></div>
          		<ul>
          			<li class="bb0">新增需求</li>
          			<li class="bb0">需求管理</li>
          			<li class="bb0 br0">需求整合 </li>
          		</ul>
          	</div>
          	<div class="cokpitList-body">
          		<ul>
          			<li v-for="n in 4">
          				<div class="cokpitList-l">
          					<h6>中国信息通信研究院虚拟化资源操作调度及安全检测仪</h6>
          					<span>XQ_20181127431</span>
          				</div>
          				<div class="cokpitList-r">
          					<h6>2018-11-27</h6>
          					<span>审核</span>
          				</div>
          			</li>
          		</ul>
          	</div>
          </div>
          <!-- 采购需求, 采购计划, 采购方案 end -->

          <!-- 采购列表与公告 start -->
          <div class="vm-cokpitList-warp">
          	<div class="cokpitList-top">
          		<ul>
          			<li class="bb0 br0 btlr5 btrr5">
          				采购列表与公示
          			</li>
          		</ul>
          	</div>
          	<div class="cokpitList-nav">
          		<div class="screen"></div>
          		<ul>
          			<li class="br0 bb0">新建采购方案</li>
          			<li class="br0 bb0">采购列表与公告制作</li>
          		</ul>
          	</div>
          	<div class="cokpitList-body">
          		<ul>
          			<li v-for="n in 4">
          				<div class="cokpitList-l">
          					<h6>中国信息通信研究院虚拟化资源操作调度及安全检测仪</h6>
          					<span>XQ_20181127431</span>
          				</div>
          				<div class="cokpitList-r">
          					<h6>2018-11-27</h6>
          					<span>查看公告</span>
          				</div>
          			</li>
          		</ul>
          	</div>
          </div>
          <!-- 采购列表与公告 end -->

          <!-- 发布需求信息,需求列表 start -->
          <div class="vm-cokpitList-warp">
          	<div class="cokpitList-top">
          		<ul>
          			<li class="btlr5" style="width: 33.3334%;flex: auto;">实时采购</li>
          			<li style="width: 33.3334%;flex: auto;">询价</li>
          			<li style="width: 33.3334%;flex: auto;" class="br0 btrr5">招投标</li>
          			<li style="width: 33.3334%;flex: auto;" class="bb0">竞价</li>
          			<li style="width: 33.3334%;flex: auto;" class="bb0">竞争性谈判</li>
          			<li style="width: 33.3334%;flex: auto;" class="br0 bb0">单一来源</li>
          		</ul>
          	</div>
          	<div class="cokpitList-nav">
          		<div class="screen"></div>
          		<ul>
          			<li>新建采购方案</li>
          			<li>采购列表与公告制作</li>
          		</ul>
          	</div>
          	<div class="cokpitList-body">
          		<ul>
          			<li v-for="n in 4">
          				<div class="cokpitList-l">
          					<h6>中国信息通信研究院虚拟化资源操作调度及安全检测仪</h6>
          					<span>XQ_20181127431</span>
          				</div>
          				<div class="cokpitList-r">
          					<h6>2018-11-27</h6>
          					<span>查看报价</span>
          				</div>
          			</li>
          		</ul>
          	</div>
          </div>
          <!-- 发布需求信息,需求列表 end -->

          <!-- 中标公示, 待签合同 start -->
          <div class="vm-cokpitList-warp">
          	<div class="cokpitList-top">
          		<ul>
          			<li class="bb0 btlr5">中标公示</li>
          			<li class="bb0 br0 btrr5">待签合同</li>
          		</ul>
          	</div>
          	<div class="cokpitList-nav">
          		<div class="screen"></div>
          		<ul>
          			<li>新建采购方案</li>
          			<li>采购列表与公告制作</li>
          		</ul>
          	</div>
          	<div class="cokpitList-body">
          		<ul>
          			<li v-for="n in 4">
          				<div class="cokpitList-l">
          					<h6>中国信息通信研究院虚拟化资源操作调度及安全检测仪</h6>
          					<span>XQ_20181127431</span>
          				</div>
          				<div class="cokpitList-r">
          					<h6>2018-11-27</h6>
          					<span>签合同</span>
          				</div>
          			</li>
          		</ul>
          	</div>
          </div>

          <!-- 合同管理 start -->
          <div class="vm-cokpitList-warp">
            <div class="cokpitList-top htgl">
              <ul class="btlr5 btrr5">
                <li class="bb0 br0">合同管理</li>
              </ul>
            </div>
            <ul class="vm-commonGrid-body htgl">
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item14"></i>
                </div>
                <p>合同签订</p>
              </li>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item15"></i>
                </div>
                <p>合同执行</p>
              </li>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item16"></i>
                </div>
                <p>合同列表</p>
              </li>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item17"></i>
                </div>
                <p>交易跟踪</p>
              </li>
            </ul>
          </div>
          <!-- 合同管理 end -->

          <!-- 到货管理 start -->
          <div class="vm-cokpitList-warp">
            <div class="cokpitList-top dhgl">
              <ul class="btlr5 btrr5">
                <li class="bb0 br0">到货管理</li>
              </ul>
            </div>
            <ul class="vm-commonGrid-body dhgl">
              <router-link to="/supplyChain/advice_arrival_bill" tag="li">
                <div class="icon">
                  <i class="vm-cockpit-icon item18"></i>
                </div>
                <p>货到单管理</p>
              </router-link>
              <router-link to="/supplyChain/InsPending_bill" tag="li">
                <div class="icon">
                  <i class="vm-cockpit-icon item19"></i>
                </div>
                <p>待检单管理</p>
              </router-link>
              <router-link to="/supplyChain/quality_testing_bill" tag="li">
                <div class="icon">
                  <i class="vm-cockpit-icon item20"></i>
                </div>
                <p>质检单管理</p>
              </router-link>
              <router-link to="/supplyChain/sales_return_bill" tag="li">
                <div class="icon">
                  <i class="vm-cockpit-icon item21"></i>
                </div>
                <p>退货单管理</p>
              </router-link>
            </ul>
          </div>
          <!-- 到货管理 end -->

          <!-- 库存管理 start -->
          <div class="vm-cokpitList-warp">
            <div class="cokpitList-top kcgl">
              <ul class="btlr5 btrr5">
                <li class="bb0 br0">库存管理</li>
              </ul>
            </div>
            <ul class="vm-commonGrid-body kcgl">
              <router-link tag="li" to="/supplyChain/warehouse_list" >
                <div class="icon">
                  <i class="vm-cockpit-icon item22"></i>
                </div>
                <p>仓库列表</p>
              </router-link>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item23"></i>
                </div>
                <p>初期数据录入</p>
              </li>
              <router-link tag="li" to="/supplyChain/warehouse_inventory">
                <div class="icon">
                  <i class="vm-cockpit-icon item24"></i>
                </div>
                <p>仓库盘点</p>
              </router-link>
              <router-link tag="li" to="/supplyChain/warehouse_allotting" class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item25"></i>
                </div>
                <p>仓库调拨</p>
              </router-link>
              <router-link tag="li" to="/supplyChain/stock_management" class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item26"></i>
                </div>
                <p>入库管理</p>
              </router-link>
              <router-link tag="li" to="/supplyChain/warehouse_management" class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item27"></i>
                </div>
                <p>出库管理</p>
              </router-link>
            </ul>
          </div>
          <!-- 库存管理 end -->

          <!-- 财务管理 start -->
          <div class="vm-cokpitList-warp">
            <div class="cokpitList-top cwgl">
              <ul class="btlr5 btrr5">
                <li class="bb0 br0">财务管理</li>
              </ul>
            </div>
            <ul class="vm-commonGrid-body cwgl">
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item28"></i>
                </div>
                <p>业务对账</p>
              </li>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item29"></i>
                </div>
                <p>财务对账</p>
              </li>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item30"></i>
                </div>
                <p>未付款管理</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item31"></i>
                </div>
                <p>已付款管理</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item32"></i>
                </div>
                <p>发票管理</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon"></i>
                </div>
                <p></p>
              </li>
            </ul>
          </div>
          <!-- 财务管理 end -->

          <!-- 统计分析 start -->
          <div class="vm-cokpitList-warp">
            <div class="cokpitList-top tjfx">
              <ul class="btlr5 btrr5">
                <li class="bb0 br0">统计分析</li>
              </ul>
            </div>
            <h6 class="title">智能分析</h6>
            <ul class="vm-commonGrid-body tjfx">
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item33"></i>
                </div>
                <p>供应商履约分析</p>
              </li>
              <router-link to="/statistics_analysis" tag="li">
                <div class="icon">
                  <i class="vm-cockpit-icon item34"></i>
                </div>
                <p>寻源分析</p>
              </router-link>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item35"></i>
                </div>
                <p>供应商分类等级</p>
              </li>
              <li class="br0">
                <div class="icon">
                  <i class="vm-cockpit-icon item36"></i>
                </div>
                <p>合同执行分析</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item37"></i>
                </div>
                <p>采购价格趋势分析</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item38"></i>
                </div>
                <p>采购支出分析</p>
              </li>
               <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item39"></i>
                </div>
                <p>库存出入库分析</p>
              </li>
               <li class="bb0 br0 ">
                <div class="icon">
                  <i class="vm-cockpit-icon"></i>
                </div>
                <p></p>
              </li>
            </ul>
            <h6 class="title">业务统计</h6>
            <ul class="vm-commonGrid-body tjfx2">
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item40"></i>
                </div>
                <p>物资采购报表</p>
              </li>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item41"></i>
                </div>
                <p>到货情况表</p>
              </li>
              <li class="br0">
                <div class="icon">
                  <i class="vm-cockpit-icon item42"></i>
                </div>
                <p>工程采购情况报表</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item43"></i>
                </div>
                <p>供应商采购情况</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item44"></i>
                </div>
                <p>库房盘点报表</p>
              </li>
              <li class="bb0 br0">
                <div class="icon">
                  <i class="vm-cockpit-icon item45"></i>
                </div>
                <p>库存物资分类统计</p>
              </li>
            </ul>
          </div>
          <!-- 统计分析 end -->

          <!-- 基础管理 start -->
          <!-- 财务管理 start -->
          <div class="vm-cokpitList-warp">
            <div class="cokpitList-top cwgl">
              <ul class="btlr5 btrr5">
                <li class="bb0 br0">基础管理</li>
              </ul>
            </div>
            <ul class="vm-commonGrid-body jcgl">
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item46"></i>
                </div>
                <p>专家管理</p>
              </li>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item47"></i>
                </div>
                <p>人员管理</p>
              </li>
              <li>
                <div class="icon">
                  <i class="vm-cockpit-icon item48"></i>
                </div>
                <p>部门管理</p>
              </li>
              <li class="br0">
                <div class="icon">
                  <i class="vm-cockpit-icon item49"></i>
                </div>
                <p>角色管理</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item50"></i>
                </div>
                <p>权限管理</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item51"></i>
                </div>
                <p>模板管理</p>
              </li>
              <li class="bb0">
                <div class="icon">
                  <i class="vm-cockpit-icon item52"></i>
                </div>
                <p>审批流程管理</p>
              </li>
            </ul>
          </div>
          <!-- 财务管理 end -->
          <!-- 基础管理 end -->

        </div>
        <!-- 中标公示, 待签合同 end -->
      </div>
    </div>

  </div>
</template>

<style>
body {
overflow: scroll !important;
}
i.vm-cockpit-icon {
	background: url("../../../static/images/cockpit/icon.png");
	background-size: 590px 463px !important;
	display: inline-block;
}
i.vm-cockpit-icon.item1 {
	width: 62px;
	height:62px;
	background-position: -259px -132px;
}
i.vm-cockpit-icon.item2 {
	width: 62px;
	height:62px;
	background-position: -131px -132px;
}
i.vm-cockpit-icon.item3 {
	width: 62px;
	height:62px;
	background-position: -195px -132px;
}
i.vm-cockpit-icon.item4 {
	width: 62px;
	height:62px;
	background-position: -68px -196px;
}
i.vm-cockpit-icon.item5 {
	width: 62px;
	height:62px;
	background-position: -67px -132px;
}
i.vm-cockpit-icon.item6 {
	width: 62px;
	height:62px;
	background-position: -3px -324px;
}
i.vm-cockpit-icon.item7 {
	width: 62px;
	height:62px;
	background-position: -67px -4px;
}
i.vm-cockpit-icon.item8 {
	width: 52px;
	height:61px;
	background-position: -8px -197px;
}
i.vm-cockpit-icon.item9 {
	width: 66px;
	height:64px;
	background-position: -193px -195px;
}
i.vm-cockpit-icon.item10 {
	width: 51px;
	height:50px;
	background-position: -323px -221px;
}
i.vm-cockpit-icon.item11 {
	width: 52px;
	height:52px;
	background-position: -431px -166px;
}
i.vm-cockpit-icon.item12 {
	width: 52px;
	height:52px;
	background-position: -431px -112px;
}
i.vm-cockpit-icon.item13 {
	width: 47px;
	height:52px;
	background-position: -488px -112px;
}
i.vm-cockpit-icon.item14 {
  width: 62px;
  height:63px;
  background-position: -259px -195px;
}
i.vm-cockpit-icon.item15 {
  width: 60px;
  height:63px;
  background-position: -260px -4px;
}
i.vm-cockpit-icon.item16 {
  width: 54px;
  height:62px;
  background-position: -263px -260px;
}
i.vm-cockpit-icon.item17 {
  width: 54px;
  height:62px;
  background-position: -263px -68px;
}
i.vm-cockpit-icon.item18 {
  width: 62px;
  height:60px;
  background-position: -131px -5px;
}
i.vm-cockpit-icon.item19 {
  width: 52px;
  height:62px;
  background-position: -72px -68px;
}
i.vm-cockpit-icon.item20 {
  width: 62px;
  height:62px;
  background-position: -131px -196px;
}
i.vm-cockpit-icon.item21 {
  width: 47px;
  height: 62px;
  background-position: -139px -324px;
}
i.vm-cockpit-icon.item22 {
  width: 62px;
  height: 62px;
  background-position: -195px -4px;
}
i.vm-cockpit-icon.item23 {
  width: 61px;
  height: 58px;
  background-position: -3px -390px;
}
i.vm-cockpit-icon.item24 {
  width: 61px;
  height: 58px;
  background-position: -196px -262px;
}
i.vm-cockpit-icon.item25 {
  width: 61px;
  height: 49px;
  background-position: -4px -75px;
}
i.vm-cockpit-icon.item26 {
  width: 61px;
  height: 56px;
  background-position: -195px -391px;
}
i.vm-cockpit-icon.item27 {
   width: 61px;
   height: 56px;
   background-position: -3px -135px;
 }
i.vm-cockpit-icon.item28 {
  width: 62px;
  height: 62px;
  background-position: -3px -260px;
}
i.vm-cockpit-icon.item29 {
  width: 62px;
  height: 62px;
  background-position: -131px -68px;
}
i.vm-cockpit-icon.item30 {
  width: 62px;
  height: 59px;
  background-position: -67px -325px;
}
i.vm-cockpit-icon.item31 {
  width: 57px;
  height: 63px;
  background-position: -134px -260px;
}
i.vm-cockpit-icon.item32 {
  width: 62px;
  height: 57px;
  background-position: -67px -263px;
}
i.vm-cockpit-icon.item33 {
  width: 52px;
  height: 52px;
  background-position: -377px -166px;
}
i.vm-cockpit-icon.item34 {
  width: 52px;
  height: 52px;
  background-position: -377px -114px;
}
i.vm-cockpit-icon.item35 {
  width: 52px;
  height: 52px;
  background-position: -485px -58px;
}
i.vm-cockpit-icon.item36 {
  width: 52px;
  height: 52px;
  background-position: -486px -4px;
}
i.vm-cockpit-icon.item37 {
  width: 52px;
  height: 52px;
  background-position: -485px -166px;
}
i.vm-cockpit-icon.item38 {
  width: 52px;
  height: 52px;
  background-position: -323px -112px;
}
i.vm-cockpit-icon.item39 {
  width: 52px;
  height: 46px;
  background-position: -323px -7px;
}
i.vm-cockpit-icon.item40 {
  width: 48px;
  height: 52px;
  background-position: -432px -4px;
}
i.vm-cockpit-icon.item41 {
  width: 52px;
  height: 46px;
  background-position: -377px -7px;
}
i.vm-cockpit-icon.item42 {
  width: 49px;
  height: 52px;
  background-position: -378px -58px;
}
i.vm-cockpit-icon.item43 {
  width: 52px;
  height: 52px;
  background-position: -431px -58px;
}
i.vm-cockpit-icon.item44 {
  width: 50px;
  height: 50px;
  background-position: -324px -168px;
}
i.vm-cockpit-icon.item45 {
  width: 52px;
  height: 52px;
  background-position: -323px -58px;
}
i.vm-cockpit-icon.item46 {
  width: 61px;
  height: 61px;
  background-position: -4px -5px;
}
i.vm-cockpit-icon.item47 {
  width: 61px;
  height: 61px;
  background-position: -196px -325px;
}
i.vm-cockpit-icon.item48 {
  width: 61px;
  height: 61px;
  background-position: -196px -68px;
}
i.vm-cockpit-icon.item49 {
  width: 61px;
  height: 61px;
  background-position: -260px -389px;
}
i.vm-cockpit-icon.item50 {
  width: 62px;
  height: 62px;
  background-position: -259px -324px;
}
i.vm-cockpit-icon.item51 {
  width: 60px;
  height: 60px;
  background-position: -132px -389px;
}
i.vm-cockpit-icon.item52 {
  width: 61px;
  height: 61px;
  background-position: -68px -388px;
}
.vm-cokpitContent-warp {
  background:#f0f0f0;
  padding: 0 8px;
}
.vm-workBench-container .vm-cokpitNav-warp {
	margin: 20px 0;
}
.vm-workBench-container .vm-cokpitNav-warp h5 {
	height: 86px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	color: #ffffff;
	background-color: #2e86d1;
	border-top-left-radius: 5px; /* no */
	border-top-right-radius: 5px; /* no */
}
.vm-workBench-container .vm-cokpitNav-warp ul {
	display: flex;
	flex-wrap: wrap;
}
.vm-workBench-container .vm-cokpitNav-warp ul li {
	width: 33.3334%;
	height: 160px;
	padding: 30px 0 10px 0;
	background-color: #53c1e6;
	border-right: 1px solid #ffffff; /* no */
	border-bottom: 1px solid #ffffff; /* no */
}
.vm-workBench-container .vm-cokpitNav-warp ul li p {
	font-size: 30px;
	color: #ffffff;
}

.vm-materielofProject {
	flex-direction: column;
	display: flex;
	margin-bottom: 20px;
}
.vm-materielofProject .materielofProject-t {
	display: flex;
  border-top-left-radius: 5px; /* no */
  border-top-right-radius: 5px; /* no */
}
.vm-materielofProject .materielofProject-t .t-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	font-size: 34px;
	color: #ffffff;
	background-color: #389cf5;
	height: 88px;
}
.vm-materielofProject .materielofProject-t .t-item:frist-child {
  border-top-left-radius: 5px; /* no */
}
.vm-materielofProject .materielofProject-t .t-item:last-child {
  border-top-right-radius: 5px; /* no */
}
.vm-materielofProject .materielofProject-b ul {
	display: flex;
	flex-direction: row;
	background: url("../../../static/images/cockpit/material-back.png");
	background-size: 100% 100%;
}
.vm-materielofProject .materielofProject-b ul li {
	flex: 1;
	border-right: 1px solid #ffffff; /* no */
	height: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0px 0 10px 0;
}
.vm-materielofProject .materielofProject-b ul li:last-child {
	border-right: none;
}
.vm-materielofProject .materielofProject-b ul li .icon-item {
	height: 75px;
	display: flex;
	align-items: flex-end;
}
.vm-materielofProject .materielofProject-b ul li i {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-items: center;
}
.vm-materielofProject .materielofProject-b ul li p {
	margin-top: 13px;
	font-size: 30px;
	width: 1.633333rem;
	color: #ffffff;
	line-height: 32px;
}
.vm-cokpitList-warp {
	padding-top: 20px;
}
.vm-cokpitList-warp .cokpitList-top.htgl,
.vm-cokpitList-warp .cokpitList-top.dhgl,
.vm-cokpitList-warp .cokpitList-top.kcgl {
  border-bottom: 1px solid #ffffff; /* no */
}
.vm-cokpitList-warp .cokpitList-top.htgl ul{
 background-color: #f3803d;
 /*background: url("../../../static/images/cockpit/htgl.png") no-repeat;*/
}
.vm-cokpitList-warp .vm-commonGrid-body.htgl {
  background: url("../../../static/images/cockpit/htgl.png") no-repeat;
}
.vm-cokpitList-warp .cokpitList-top.dhgl ul {
  background-color: #3d91dd;
}
.vm-cokpitList-warp .cokpitList-top.dhgl ul li,
.vm-cokpitList-warp .cokpitList-top.htgl ul li,
.vm-cokpitList-warp .cokpitList-top.kcgl ul li,
.vm-cokpitList-warp .cokpitList-top.cwgl ul li,
.vm-cokpitList-warp .cokpitList-top.tjfx ul li {
  background: transparent;
}
.vm-cokpitList-warp .vm-commonGrid-body.dhgl {
  background: url("../../../static/images/cockpit/dhgl.png") no-repeat;
}
.vm-cokpitList-warp .vm-commonGrid-body.kcgl {
  flex-wrap: wrap;
  background: url("../../../static/images/cockpit/kcgl.png") no-repeat;
}

.vm-cokpitList-warp .cokpitList-top.cwgl ul{
  background-color: #f3803d;
}
.vm-cokpitList-warp .cokpitList-top.tjfx ul {
  background-color: #5e51d0;
}
.vm-cokpitList-warp .vm-commonGrid-body.cwgl {
  flex-wrap: wrap;
  background: url("../../../static/images/cockpit/cwgl.png") no-repeat;
}
.vm-cokpitList-warp .vm-commonGrid-body.cwgl li {
  border-bottom: 1px solid #ffffff;
  width: 33.334%;
  flex: initial;
}
.vm-cokpitList-warp .vm-commonGrid-body.kcgl li{
  border-bottom: 1px solid #ffffff;
  width: 33.334%;
  flex: initial;
}
.vm-cokpitList-warp .vm-commonGrid-body.tjfx {
  flex-wrap: wrap;
}
.vm-cokpitList-warp .vm-commonGrid-body.jcgl {
  background: url("../../../static/images/cockpit/jcgl.png") no-repeat;
}
.vm-cokpitList-warp .vm-commonGrid-body.tjfx li {
  border-bottom: 1px solid #ffffff;
  width: 25%;
  flex: initial;
}
.vm-cokpitList-warp .vm-commonGrid-body.tjfx2 {
  flex-wrap: wrap;
  background: url("../../../static/images/cockpit/jcgl.png") no-repeat;
}
.vm-cokpitList-warp .vm-commonGrid-body.tjfx2 li {
  border-bottom: 1px solid #ffffff;
  width: 33.3334%;
  flex: initial;
}
.vm-cokpitList-warp .vm-commonGrid-body.jcgl {
  flex-wrap: wrap;
}
.vm-cokpitList-warp .vm-commonGrid-body.jcgl li {
  border-bottom: 1px solid #ffffff;
  width: 25%;
  flex: initial;
}
.vm-cokpitList-warp .vm-commonGrid-body.kcgl li:last-child {
  border-right: 1px solid #ffffff;
}
.vm-cokpitList-warp .cokpitList-top.kcgl ul {
  background-color: #3d91dd;
}
.vm-cokpitList-warp .cokpitList-top {
	border-top-left-radius: 5px; /* no */
	border-top-right-radius: 5px; /* no */
}
.vm-cokpitList-warp .cokpitList-top ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.vm-cokpitList-warp .cokpitList-top ul li {
	flex-wrap: wrap;
	flex: 1;
	background-color: #333a4c;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	color: #ffffff;
	position: relative;
	border-right: 1px solid #ffffff; /* no */
	border-bottom: 1px solid #ffffff; /* no */
}
.btlr5 {
  border-top-left-radius: 5px; /* no */
}
.btrr5 {
  border-top-right-radius: 5px; /* no */
}
.br0 {
	border-right: 0 !important;
}
.bb0 {
	border-bottom: 0 !important;
}
.vm-cokpitList-warp .cokpitList-top ul li span {
	position: absolute;
	right: 0;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ff5b5b;
	color: #ffffff;
	font-size: 18px;
}
.vm-cokpitList-warp .cokpitList-nav > div.screen {
	width: 55px;
	background-color: #bae7ff;
}
.vm-cokpitList-warp .cokpitList-nav {
	display: flex;
}
.vm-cokpitList-warp .cokpitList-nav > ul {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.vm-cokpitList-warp .cokpitList-nav > ul li {
	height: 80px;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ddf3ff;
	font-size: 30px;
	color: #333333;
	border-right: 1px solid #ffffff; /* no */
}
.vm-cokpitList-warp .cokpitList-nav > ul li:last-child {
	border-right: none;
}
.vm-cokpitList-warp .cokpitList-body {
	padding: 0 17px;
	background-color: #ffffff;
}
.vm-cokpitList-warp .cokpitList-body ul {
	display: flex;
	flex-wrap: wrap;
}
.vm-cokpitList-warp .cokpitList-body ul li {
	display: flex;
	flex-direction: row;
	padding: 30px 0;
	border-bottom: 1px solid #d8d8d8; /* no */
}
.vm-cokpitList-warp .cokpitList-body ul li:last-child {
	border-bottom: none;
}
.vm-cokpitList-warp .cokpitList-body .cokpitList-l {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	text-align: left;
	height: 120px;
}
.vm-cokpitList-warp .cokpitList-body .cokpitList-l > h6 {
	color: #333333;
	font-size: 30px;
	line-height: 45px;
}
.vm-cokpitList-warp .cokpitList-body .cokpitList-l > span {
	color: #666666;
	font-size: 20px;
}
.vm-cokpitList-warp .cokpitList-body .cokpitList-r {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 205px;
	text-align: right;
	height: 120px;
}
.vm-cokpitList-warp .cokpitList-body .cokpitList-r > h6 {
	font-size: 20px;
	color: #666666;
}
.vm-cokpitList-warp .cokpitList-body .cokpitList-r > span {
	color: #ef0909;
	font-size: 24px;
}
.vm-cokpitList-warp .vm-commonGrid-body {
  display: flex;
  flex-direction: row;
}
.vm-cokpitList-warp .vm-commonGrid-body li {
  flex: 1;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  font-size: 30px;
  color: #ffffff;
  border-right: 1px solid #ffffff; /* no */
}
.vm-cokpitList-warp .vm-commonGrid-body li:last-child {}
.vm-cokpitList-warp .vm-commonGrid-body li div.icon {
  height: 85px;
  display: flex;
  align-items: flex-end;
}
.vm-cokpitList-warp .vm-commonGrid-body li p {
  font-size: 30px;
  color: #ffffff;
  padding-bottom: 15px;
}

.vm-cokpitList-warp .vm-commonGrid-body.tjfx {
  background: url("../../../static/images/cockpit/znfx.png") no-repeat;
}
.vm-cokpitList-warp .vm-commonGrid-body.tjfx li p {
  width: 120px;
  height: auto;
  padding: 0;
}
.vm-cokpitList-warp .vm-commonGrid-body.jcgl li p {
  width: 120px;
  height: auto;
  padding: 0;
}
.vm-cokpitList-warp h6.title {
  height: 75px;
  display: flex;
  align-items: center;
  color:  #333333;
  font-size: 28px;
  background-color: #ffffff;
}
.vm-cokpitList-warp h6.title::before {
  content: '';
  width: 5px;
  height: 25px;
  background-color: #f06b6b;
  margin-left: 32px;
  margin-right: 20px;
}
</style>

<script>
import BScroll from 'better-scroll'
import vmCommonHeader from '@/components/vm-common-header' // header 组件
import { getWorkflowList, getWorkflowListNext } from '@/api/examine.js'
export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        pendingTotal: 0,
        processedTotal: 0
      }
    },
    created () {
      this.getExamineTotal();
    },
    computed: {
      AllTotal:{
        get () {
          return parseInt(this.pendingTotal) + parseInt(this.processedTotal);
        }
      }
    },
    methods: {
      // 获取审批工作台总数
      async getExamineTotal () {
        let pendingTotal = await getWorkflowList().then(res => res.data.total).catch((err) => {
          this.processedTotal = 0;
        });
        let processedTotal = await getWorkflowListNext().then(res => res.data.total).catch((err) => {
         this.processedTotal = 0;
        });
        if (pendingTotal != 'undefined' && processedTotal != 'undefined') {
          this.pendingTotal = pendingTotal;
          this.processedTotal = processedTotal;
        }
      },
      work_benchToCarygory (r) {
        // 判断在编辑状态时，不可跳转，防止用户操作编辑与页面行为冲突。
        !this.edit && this.$router.push({
          path:r
        })
      }
    },
    components: {
        'vm-common-header': vmCommonHeader
    }
}
</script>



<style lang="scss" scoped>

.vm-header-container {
  z-index: 9999 !important;
  background: url("../../../static/images/desk_bg.jpg") no-repeat !important;
  background-size: 100% 403px !important;
}
.vm-workBench-header {
  top: 0;
  left: 0;
  position:  fixed;
  width: 100%;
  height: 390px;
  background: url("../../../static/images/desk_bg.jpg") no-repeat;
  background-size: cover !important;
}
.vm-workBench-container {
  padding:0 0 90px 0;
  margin-top: 320px;
  position: absolute;
  z-index: 999;
  width: 100%;
  top: 0;
  background-size: 0 390px;
  overflow-y: scroll;
  overflow-x: hidden;
  .vm-workBench-warp {
    position: relative;
    padding: 0 30px;
    z-index: 999;
    height: 140px;
    .vm-workBench-content {
      box-shadow: 0 2px 1px #e3e3e3;
      border-radius: 15px; /* no */
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      align-items: center;
      div {
        flex: 1;
        display: flex;
        flex-direction: column;
        p {
          height: 55px;
          font-size: 36px;
          color: #666;
        }
        h6 {
          font-size: 28px;
          color: #141414;
          font-weight: bold;
        }
      }
    }
  }
  .vm-item-warp {
    background-color: #f4f4f4;
  }
}
</style>


